<template>
<!-- 用户登录页面 -->
    <div class="login-pop">
        <!-- 关闭按钮 -->
        <div class="close">
            <span class="iconfont icon-guanbi1" @click="closeLogin"></span>
        </div>
        <!-- 手机登录 -->
        <div class="phone-login" v-if="loginWay == 0">
            <!-- 手机号登录title -->
            <h2>手机号登录</h2> 
            <!-- 手机图标 -->
            <div class="imgs">
                <span class="iconfont icon-tel"></span>
            </div>
            <!-- form表单 -->
            <div class="form">
                <el-form  status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="手机号" prop="pass">
                        <el-input type="tlephone" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="checkPass">
                        <el-input type="password"  placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item class=".btn">
                        <el-button type="primary">登录</el-button>
                    </el-form-item>
                     <el-form-item class=".btn">
                        <el-button>注册</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 扫描登录 -->
            <div class="other-way" @click="changeLoginWay(1)">
                <span>
                    <i class="iconfont icon-erweima1"></i>
                    <i class="text">扫码登录</i>
                </span>
            </div>
        </div>
        <!-- 扫描登录二维码展示 -->
        <div class="qr-login" v-else-if="loginWay == 1">
            <div class="qr">
                <h2>扫码登录</h2>
                <img :src="qrimg" alt=""/>
                <p v-if="failqr" class="failqr">二维码失效，<span>点击刷新</span></p>
                <p class="text">使用<span v-if="!scanQr" style="color:#5091ca">网易云音乐APP</span>扫码登录</p>
                <p v-if="scanQr" class="text">扫描成功，请在手机上确认登录</p>
                <!-- 其他登录方式 -->
                <div class="other-way" style="margin-top:30px" @click="changeLoginWay(0)">
                    <span>
                        <i class="iconfont icon-tel"></i>
                        <i class="text">手机号登录</i>
                    </span>
                </div>
                <!-- 没有账号去注册 -->
                <div class="other-way" style="padding-top: 40px">
                    <span>还没有账号，去注册</span>
                </div>
            </div>
           
        </div>
        <!-- 注册新用户 -->
        <div class="register" v-else>

        </div>
    </div>
</template>
<script>
export default {
    name:'',
    data() {
        return {
            loginWay:0,// 登录的方式
            failqr: false,//控制二维码失效显示文本
            scanQr:false,
            qrKey:'',// 获取二维码使用的key
            qrimg:'',//二维码路径
            timer:"",// 二维码定时器
        }
    },
    methods:{
        // 关闭登录框
        closeLogin(){
            this.$emit('closeLogin');
            // 关闭定时器
			clearInterval(this.timer);
        },
        // 更换登录方式
        changeLoginWay(value){
            this.loginWay = value
            // 判断登录方式。如果是二维码登录，获取二维码
            if(value == 1){
                this.qrLogin();
            }  
        },
        // 二维码登录
        async qrLogin(){
            this.failqr = false
            this.scanQr = false
            // 首先先获取 二维码要的key
           let resultKey = await this.$API.login.reqGetKey();
           if(resultKey.code == 200){
            this.qrKey = resultKey.data.unikey;
            // 调用接口获取二维码
            let resultQrCode = await this.$API.login.reqGetQrCode(this.qrKey);
            if(resultQrCode.code == 200){
                this.qrimg = resultQrCode.data.qrimg;
                // 编写一个定时器检查二维码的状态是否有效
                this.timer = setInterval(async () =>{
                  let resultCheck = await this.$API.login.reqCheckKey(this.qrKey);
                  if(resultCheck.code == 800){
                    // 二维码过期
                    this.$message({
                        type:'warning',
                        message:'二维码已失效'
                    });
                    // 清除定时器
                    clearInterval(this.timer)
                    // 显示提示刷新文字
                    this.failqr = true
                  }else if(resultCheck.code == 802){
                    // 带确认
                    this.scanQr = true;
                  }else if(resultCheck.code == 803){
                    // 已经登录
                    // 清除定时器
                    clearInterval(this.timer);
                    this.$message({
                        type:'success',
                        message:'登录成功'
                    });
                    // 获取用户信息
                    this.getUserAccount();
                  }
                },2000)
            }else{
                this.$message({
                    type:'error',
                    message:'获取二维码失败'
                })
            }
           }else{
            this.$message({
                type:'error',
                message:'获取key失败'
            })
           }
        },
        // 登录后获取账户信息
        async getUserAccount(){
           let result = await this.$API.login.reqUserAccount();
           if(result.code == 200){
                // 根据账号信息获取用户信息
               let uid = result.profile.userId
               let resUserInfo = await this.$API.login.reqUserInfo(uid);
               if(resUserInfo.code == 200){
                    // 登录成功后续操作
                    this.loginSuccess(resUserInfo);
               }else{
                    // 获取失败
               }
           }
        },
        // 登录成功后续操作
        loginSuccess(res){
            // 首先关闭登录窗口
            this.closeLogin()
            // 更新登录状态
            this.$store.dispatch('updateLogin',true);
            // 保存本地当前是否登录
            this.setItem("isLogin", true);
            // 缓存用户信息,防止刷新消失
            this.setItem('userInfo',res.profile)
            // 提交给vuex，保存用户信息
            this.$store.dispatch('saveUserInfo',res.profile)
            // 获取用户的歌单数据
            this.getUserSongList(res.profile.userId);
        },
        // 获取用户的歌单数据和喜欢的数据
        async getUserSongList(uid){
            // 获取用户的歌单列表
            let resSongList =  await this.$API.userdetail.getUserSongList(uid);
            this.setItem('userSongList',resSongList.playlist);
            this.$store.dispatch('saveUserSongList',resSongList.playlist)
            // 获取用户喜欢的歌单列表id
            let likeSongList = await this.$API.userdetail.getUserLikeSongList(uid);
            this.setItem('likeSongIds',likeSongList.ids);
            this.$store.dispatch('saveLikeSongIds',likeSongList.ids);
        }
        
    },
    created(){
    },
}
</script>
<style lang="less" scoped>
.login-pop{
    position: absolute;
    top: 100px;
    left: 35%;
    box-shadow: 0px 0px 5px 5px #eee;
    border-radius: 10px;
    width: 450px;
    height: 450px;
    background: #fff;
    text-align: center;
    .close{
        text-align: right;
        cursor: pointer;
        padding: 10px 20px 0 0;
        .icon-guanbi1{
            font-size: 22px;
        }
    }
    .phone-login{
        padding-right: 30px;
        .imgs{
            width: 100px;
            height: 100px;
            margin: 0 auto;
            line-height: 100px;
            .icon-tel{
                font-size: 50px;
                color: var(--themeColor);
            }
        }
        .form{ 
            justify-content: center;
           .el-button{
                width: 200px; 
                margin-right:70px;
            }

        }
    }
    .qr-login{
        .qr{
            h2{
                margin-top: 20px;
                margin-bottom: 10px;
            }
            img{
                width: 170px;
			    height: 170px;
                 margin-bottom: 20px;
            }
            .failqr{
               span{
                cursor: pointer;
                color: var(--themeColor);
               }
            }
        }
    }
    .other-way{
        margin-top: 10px;
        span:hover{
            color: var(--themeColor);
            cursor: pointer;
        }
    }
}
</style>